<template>
	<view class="main">
		<view class="top">
			<!-- <div class="icon" @click='toset'>
				<u-icon name="setting" color="#fff" size="28"></u-icon>
			</div> -->
			<div class="user">
				<image :src="userInfo.avatarUrl" mode=""></image>
				<view class="txt">
					{{userInfo.nickName}}
				</view>
			</div>
		</view>
		<view class="list">
			<view class="li" @click="todetail('/pages/userInfo/userInfo')">
				<view style="display: flex;">
					<u-icon name="bell-fill" color="#3DD4A7" size="20"></u-icon>
					<view class="txt">
						个人信息
					</view>
					</div>
				</view>
				<u-icon name="arrow-right" size="20"></u-icon>
			</view>
			<view class="li" @click="todetail('/pages/myaccount/myaccount')">
				<view style="display: flex;">
					<u-icon name="file-text-fill" color="#7C83F6" size="20"></u-icon>
					<view class="txt">
						我的账本
					</view>
					</div>
				</view>
				<u-icon name="arrow-right" size="20"></u-icon>
			</view>
			<view class="li">
				<view style="display: flex;    width: 100%;">
					<u-icon name="account-fill" color="#2360EE" size="20"></u-icon>
					<view class="txt" style="width: 100%;">
						<button :plain='true' open-type="share">分享给朋友</button>
					</view>
					</div>
				</view>
				<u-icon name="arrow-right" size="20"></u-icon>
			</view>
			<u-toast ref="uToast"></u-toast>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
			}
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo')
			if (!uni.getStorageSync('userInfo')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		},
		onLoad() {
			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ["shareAppMessage", "shareTimeline"]
			})
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res)
			}
			return {
				title: '晨曦曦小算盘', //分享的名称
				path: '/pages/index/index',
				mpId: 'wxb4f527bd11796c0e' //此处配置微信小程序的AppId
			}
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '晨曦曦小算盘',
				type: 0,
				summary: "",
			}
		},
		mounted() {},
		methods: {
			todetail(e) {
				uni.navigateTo({
					url: e
				})
			},
		}
	}
</script>
<style>
	.main .u-icon {
		justify-content: right;
	}
</style>
<style lang="scss" scoped>
	.list {
		margin-top: 20rpx;

		.li {
			padding: 15rpx 35rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 15rpx;
			background: #fff;

			.txt {
				margin-left: 10rpx;
			}
		}
	}

	.top {
		color: #fff;
		background-color: #39BDFD;
		padding: 60rpx 20rpx;
		font-size: 24rpx;

		.user {
			margin-top: 100rpx;

			.txt {
				margin-top: 20rpx;
			}

			text-align: center;

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
		}

		.icon {
			text-align: left;
		}
	}
</style>
<style>
	.main button {
		border: none;
		padding: 0;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 30rpx;
		width: 100%;
		text-align: left;
	}
</style>